<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="app">
    <h3>{{ title }}</h3>
    <div>
      <button @click="count--">-</button>
      <span>{{ count }}</span>
      <button @click="count++">+</button>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    /*dom是页面和js相互连接的桥梁（其实就是模板里边的的可变数据），要等页面模板挂载完成之后才能操作dom*/
    /* Vue生命周期的四个阶段
    *  创建阶段——————进行初始化工作，将数据从普通数据转化成响应式数据（创建data类）————创建之后才能发请求
    *  挂载阶段——————将数据挂载到模板上（el）, 挂在完毕之后对模板进行渲染(<template>)————挂载之后才能操作dom
    *  更新阶段——————将响应式数据修改之后其对应的视图也会自动更新
    *  销毁阶段——————关闭浏览器或切换页面时当前实例会被销毁
    * */
    /* Vue生命周期的八个函数（钩子函数，生命周期钩子）
    *  创建前:beforeCreate ()
    *  创建后:created ()
    *  挂载前:beforeMount ()
    *  挂载后:mounted ()
    *  更新前:beforeUpdate () ——————数据变了，视图不更新
    *  更新后:updated () ——————数据变了，视图也更新了
    *  卸载前:beforeDestroy () ————清除掉一些Vue以外的资源占用，定时器，延时器等
    *  卸载后:destroyed ()
    * */
    const app = new Vue({
      el: '#app',
      data: {
        count: 100,
        title: '计数器'
      },
      // 1. 创建阶段（准备数据）
      beforeCreate () {
        console.log('beforeCreate 响应式数据准备好之前', this.count)
      },
      created () {
        console.log('created 响应式数据准备好之后', this.count)
        // this.数据名 = 请求回来的数据
        // 可以开始发送初始化渲染的请求了
      },

      // 2. 挂载阶段（渲染模板）
      beforeMount () {
        console.log('beforeMount 模板渲染之前', document.querySelector('h3').innerHTML)
      },
      mounted () {
        console.log('mounted 模板渲染之后', document.querySelector('h3').innerHTML)
        // 可以开始操作dom了
      },

      // 3. 更新阶段(修改数据 → 更新视图)
      beforeUpdate () {
        //这个东西拿的是dom结构,不是data中的数据
        console.log('beforeUpdate 数据修改了，视图还没更新', document.querySelector('span').innerHTML)
      },
      updated () {
        console.log('updated 数据修改了，视图已经更新', document.querySelector('span').innerHTML)
      },

      // 4. 卸载阶段
      beforeDestroy () {
        console.log('beforeDestroy, 卸载前')
        console.log('清除掉一些Vue以外的资源占用，定时器，延时器...')
      },
      destroyed () {
        console.log('destroyed，卸载后')
      }
    })
  </script>
</body>
</html>